<template>
  <div class="attendance-stats">
    <!-- 应到人数 -->
    <div class="stats-section total-section">
      <div class="section-title">
        <span class="title-text">应到人数</span>
        <span class="total-number">{{ totalExpected }}</span>
      </div>
      <div class="progress-bar">
        <div v-if="rendaExpectedPercentage > 0" class="bar-item renda" :style="{ width: `${rendaExpectedPercentage}%` }" />
        <div v-if="liexiExpectedPercentage > 0" class="bar-item liexi" :style="{ width: `${liexiExpectedPercentage}%` }" />
      </div>
      <!-- <div class="legend">
        <div class="legend-item">
          <span class="legend-color renda"></span>
          <span class="legend-text">{{ getRepresentativeName }}</span>
        </div>
        <div class="legend-item">
          <span class="legend-color liexi"></span>
          <span class="legend-text">列席人员</span>
        </div>
      </div> -->
      <div class="bar-labels">
        <div v-if="rendaExpectedPercentage > 0" class="label-item">
          <span class="legend-color renda"></span>
          {{ getRepresentativeName }} {{ statistics?.yingdao?.renda || 0 }}
        </div>
        <div v-if="liexiExpectedPercentage > 0" class="label-item">
          <span class="legend-color liexi"></span>
          列席人员 {{ statistics?.yingdao?.liexi || 0 }}
        </div>
      </div>
    </div>

    <!-- 实到人数 -->
    <div class="stats-section">
      <div class="section-title">
        <span class="title-text">实到人数</span>
        <span class="number">{{ totalPresent }} ({{ ((totalPresent / totalExpected) * 100).toFixed(1) }}%)</span>
      </div>

      <!-- 按时到 -->
      <div class="sub-section">
        <div class="sub-title">按时到</div>
        <div class="progress-bar">
          <div
            v-if="statistics?.shidao?.anshidao?.renda > 0"
            class="bar-item renda"
            :style="{
              width: `${((statistics?.shidao?.anshidao?.renda || 0) / totalExpected) * 100}%`,
            }"
          />
          <div
            v-if="statistics?.shidao?.anshidao?.liexi > 0"
            class="bar-item liexi"
            :style="{
              width: `${((statistics?.shidao?.anshidao?.liexi || 0) / totalExpected) * 100}%`,
            }"
          />
        </div>
        <div class="bar-labels">
          <div v-if="statistics?.shidao?.anshidao?.renda > 0" class="label-item">
            <span class="legend-color renda"></span>
            {{ getRepresentativeName }} {{ statistics?.shidao?.anshidao?.renda || 0 }}
          </div>
          <div v-if="statistics?.shidao?.anshidao?.liexi > 0" class="label-item">
            <span class="legend-color liexi"></span>
            列席人员 {{ statistics?.shidao?.anshidao?.liexi || 0 }}
          </div>
        </div>
      </div>
      <!-- 迟到 -->
      <div class="sub-section">
        <div class="sub-title">迟到</div>
        <div class="progress-bar">
          <div
            v-if="statistics?.shidao?.chidao?.renda > 0"
            class="bar-item renda"
            :style="{
              width: `${((statistics?.shidao?.chidao?.renda || 0) / totalExpected) * 100}%`,
            }"
          />
          <div
            v-if="statistics?.shidao?.chidao?.liexi > 0"
            class="bar-item liexi"
            :style="{
              width: `${((statistics?.shidao?.chidao?.liexi || 0) / totalExpected) * 100}%`,
            }"
          />
        </div>
        <div class="bar-labels">
          <div v-if="statistics?.shidao?.chidao?.renda > 0" class="label-item">
            <span class="legend-color renda"></span>
            {{ getRepresentativeName }} {{ statistics?.shidao?.chidao?.renda || 0 }}
          </div>
          <div v-if="statistics?.shidao?.chidao?.liexi > 0" class="label-item">
            <span class="legend-color liexi"></span>
            列席人员 {{ statistics?.shidao?.chidao?.liexi || 0 }}
          </div>
        </div>
      </div>
    </div>

    <!-- 未到人数 -->
    <div class="stats-section">
      <div class="section-title">
        <span class="title-text">未到人数</span>
        <span class="number" style="display: none">{{ totalAbsent }} ({{ ((totalAbsent / totalExpected) * 100).toFixed(1) }}%)</span>
      </div>

      <!-- 请假 -->
      <div class="sub-section" style="display: none">
        <div class="sub-title">请假</div>
        <div class="progress-bar">
          <div
            v-if="statistics?.weidao?.qingjia?.renda > 0"
            class="bar-item renda"
            :style="{
              width: `${((statistics?.weidao?.qingjia?.renda || 0) / totalExpected) * 100}%`,
            }"
          />
          <div
            v-if="statistics?.weidao?.qingjia?.liexi > 0"
            class="bar-item liexi"
            :style="{
              width: `${((statistics?.weidao?.qingjia?.liexi || 0) / totalExpected) * 100}%`,
            }"
          />
        </div>
        <div class="bar-labels">
          <div v-if="statistics?.weidao?.qingjia?.renda > 0" class="label-item">
            <span class="legend-color renda"></span>
            {{ getRepresentativeName }} {{ statistics?.weidao?.qingjia?.renda || 0 }}
          </div>
          <div v-if="statistics?.weidao?.qingjia?.liexi > 0" class="label-item">
            <span class="legend-color liexi"></span>
            列席人员 {{ statistics?.weidao?.qingjia?.liexi || 0 }}
          </div>
        </div>
      </div>
      <!-- 旷到 -->
      <div class="sub-section">
        <div class="sub-title">未到</div>
        <div class="progress-bar">
          <div
            v-if="totalKuangdao.renda > 0"
            class="bar-item renda"
            :style="{
              width: `${(totalKuangdao.renda / totalExpected) * 100}%`,
            }"
          />
          <div
            v-if="totalKuangdao.liexi > 0"
            class="bar-item liexi"
            :style="{
              width: `${(totalKuangdao.liexi / totalExpected) * 100}%`,
            }"
          />
        </div>
        <div class="bar-labels">
          <div v-if="totalKuangdao.renda > 0" class="label-item">
            <span class="legend-color renda"></span>
            {{ getRepresentativeName }} {{ totalKuangdao.renda }}
          </div>
          <div v-if="totalKuangdao.liexi > 0" class="label-item">
            <span class="legend-color liexi"></span>
            列席人员 {{ totalKuangdao.liexi }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

defineOptions({
  name: 'DataScreenLeft2',
})

interface AttendanceStats {
  yingdao: {
    count: number
    renda: number
    liexi: number
  }
  shidao: {
    count: number
    anshidao: {
      renda: number
      liexi: number
    }
    chidao: {
      renda: number
      liexi: number
    }
  }
  weidao: {
    count: number
    qingjia: {
      renda: number
      liexi: number
    }
    kuangdao: {
      renda: number
      liexi: number
    }
  }
}

const props = defineProps<{
  statistics?: AttendanceStats
  type?: string
}>()

// 根据会议类型返回代表名称
const getRepresentativeName = computed(() => {
  switch (props.type) {
    case '1': {
      return '人大代表'
    }
    case '2': {
      return '政协委员'
    }
    default: {
      return '人大代表'
    }
  }
})

// 计算总应到人数（人大代表 + 列席人员）
const totalExpected = computed(() => {
  return (props.statistics?.yingdao?.renda || 0) + (props.statistics?.yingdao?.liexi || 0)
})

// 计算人大代表应到比例
const rendaExpectedPercentage = computed(() => {
  const total = totalExpected.value
  if (total === 0) return 0
  return ((props.statistics?.yingdao?.renda || 0) / total) * 100
})

// 计算列席人员应到比例
const liexiExpectedPercentage = computed(() => {
  const total = totalExpected.value
  if (total === 0) return 0
  return ((props.statistics?.yingdao?.liexi || 0) / total) * 100
})

// 计算总实到人数（按时到 + 迟到）
const totalPresent = computed(() => {
  const anshidao = (props.statistics?.shidao?.anshidao?.renda || 0) + (props.statistics?.shidao?.anshidao?.liexi || 0)
  const chidao = (props.statistics?.shidao?.chidao?.renda || 0) + (props.statistics?.shidao?.chidao?.liexi || 0)
  return anshidao + chidao
})

// 计算总未到人数（应到 - 实到）
const totalAbsent = computed(() => {
  return totalExpected.value - totalPresent.value
})

// 计算请假人数
const totalLeave = computed(() => {
  return (props.statistics?.weidao?.qingjia?.renda || 0) + (props.statistics?.weidao?.qingjia?.liexi || 0)
})

// 计算旷到人数（未到 - 请假）
const totalKuangdao = computed(() => {
  const kuangdaoRenda = Math.max(
    (props.statistics?.yingdao?.renda || 0) -
      (props.statistics?.shidao?.anshidao?.renda || 0) -
      (props.statistics?.shidao?.chidao?.renda || 0) -
      (props.statistics?.weidao?.qingjia?.renda || 0),
    0
  )

  const kuangdaoLiexi = Math.max(
    (props.statistics?.yingdao?.liexi || 0) -
      (props.statistics?.shidao?.anshidao?.liexi || 0) -
      (props.statistics?.shidao?.chidao?.liexi || 0) -
      (props.statistics?.weidao?.qingjia?.liexi || 0),
    0
  )

  return {
    renda: kuangdaoRenda,
    liexi: kuangdaoLiexi,
  }
})
</script>

<style lang="scss" scoped>
.attendance-stats {
  padding: 15px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: #fff;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    Fira Sans,
    Droid Sans,
    Helvetica Neue,
    sans-serif;
  -webkit-font-smoothing: antialiased;

  .stats-section {
    display: flex;
    flex-direction: column;
    gap: 12px;

    &.total-section {
      .section-title {
        height: 60px;
        padding: 0 20px;
        background: linear-gradient(90deg, rgba(30, 128, 255, 0.1), rgba(30, 128, 255, 0.2));
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 5px;

        &::before {
          display: none;
        }

        .title-text {
          font-size: 18px;
          color: rgba(255, 255, 255, 0.9);
        }

        .total-number {
          font-size: 32px;
          font-weight: 600;
          color: #1e80ff;
          text-shadow: 0 0 10px rgba(30, 128, 255, 0.3);
        }
      }
    }

    .section-title {
      font-size: 16px;
      font-weight: 500;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 12px;

      &::before {
        content: '';
        display: block;
        width: 4px;
        height: 16px;
        background: #1e80ff;
        border-radius: 2px;
      }

      .title-text {
        flex: 1;
      }

      .number {
        font-size: 20px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.9);
      }
    }

    .sub-section {
      margin-left: 20px;

      .sub-title {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 8px;
      }
    }

    .progress-bar {
      height: 32px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 16px;
      display: flex;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease;

      &:hover {
        background: rgba(255, 255, 255, 0.08);
      }

      .bar-item {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 14px;
        transition: all 0.3s ease;
        white-space: nowrap;
        padding: 0 12px;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(
            90deg,
            rgba(232, 243, 255, 0) 0%,
            rgba(232, 243, 255, 0.1) 25.09%,
            rgba(232, 243, 255, 0.2) 50.16%,
            rgba(232, 243, 255, 0.1) 75.47%,
            rgba(232, 243, 255, 0) 100%
          );
          opacity: 0;
          transition: opacity 0.3s;
        }

        &:hover::before {
          opacity: 1;
        }

        &.renda {
          background: linear-gradient(90deg, #1e80ff, #1171ee);
        }

        &.liexi {
          background: linear-gradient(90deg, #28c76f, #1f9d57);
        }
      }
    }

    .bar-labels {
      display: flex;
      gap: 20px;
      margin-top: 8px;
      padding: 0 12px;

      .label-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);

        .legend-color {
          width: 16px;
          height: 8px;
          border-radius: 4px;

          &.renda {
            background: linear-gradient(90deg, #1e80ff, #1171ee);
          }

          &.liexi {
            background: linear-gradient(90deg, #28c76f, #1f9d57);
          }
        }
      }
    }
  }

  .legend {
    display: flex;
    gap: 20px;
    margin: 8px 0;
    padding: 0 12px;

    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;

      .legend-color {
        width: 16px;
        height: 8px;
        border-radius: 4px;

        &.renda {
          background: linear-gradient(90deg, #1e80ff, #1171ee);
        }

        &.liexi {
          background: linear-gradient(90deg, #28c76f, #1f9d57);
        }
      }

      .legend-text {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }
}
</style>
